<script>
import { ElPagination, genProps } from "../attributes";

export default {
    name: "Pagination",
    functional: true,
    props: {
        option: {
            type: Object,
            default() {
                return {
                    small: false,
                    background: false,
                    pageSize: 10,
                    pagerCount: 7,
                    currentPage: 1,
                    layout: 'total, sizes, prev, pager, next, jumper',
                    pageSizes: [ 10, 20, 30, 40, 50, 100 ],
                    disabled: false,
                };
            },
        },
        render: Function,
        event: {
            type: Object,
            default() {
                return {
                    sizeChange(size) {
                    },
                    currentChange(page) {
                    },
                    prevClick(page) {
                    },
                    nextClick(page) {
                    },
                };
            },
        },
    },
    render: (h, ctx) => {
        let html = [];
        if (ctx.props.render) {
            html.push(ctx.props.render(h, ctx.props.option))
        }
        let props = genProps(ElPagination, ctx.props.option)
        return h('el-pagination', {
            style: {
                padding: '12px 0',
            },
            props,
            on: {
                'size-change': size => {
                    ctx.props.event && typeof ctx.props.event.sizeChange === 'function' && ctx.props.event.sizeChange(size);
                },
                'current-change': page => {
                    ctx.props.event && typeof ctx.props.event.currentChange === 'function' && ctx.props.event.currentChange(page);
                },
                'prev-click': page => {
                    ctx.props.event && typeof ctx.props.event.prevClick === 'function' && ctx.props.event.prevClick(page);
                },
                'next-click': page => {
                    ctx.props.event && typeof ctx.props.event.nextClick === 'function' && ctx.props.event.nextClick(page);
                },
            },
        }, html);
    },
}
</script>

<style scoped>

</style>